<template>
    <view class="header">
        <view class="user">
            <view class="avator-box">
                <!-- 后期自动获取 -->
                <image src="../../static/icon/useravtor.png" alt="" />
            </view>
            <view class="user-info">
                <view class="nickname">{{ userInfo.nikeName }}</view>
                <view class="username">{{ userInfo.phone }}</view>
            </view>
        </view>
        <view class="user-icon">
            <image @click="routerPush" src="../../static/icon/setting.png" mode="" />
            <!-- 消息提醒 -->
            <!-- <image class="mt-4" src="../../static/icon/notice-dot.png" v-if="flag" mode="" /> -->
            <!-- <image class="mt-4" src="../../static/icon/notice.png" v-else mode="" /> -->
            <image src="../../static/icon/more.png" mode="" />
        </view>
    </view>
    <view class="main">
        <view class="card">
            <image class="bg" src="../../static/img/card-border.png" mode="" />
            <view class="property-box">
                <view class="total">
                    <view class="title">{{ $t('information.card.total') }}</view>
                    <view class="num">{{ userInfo.allMoney }}</view>
                </view>
                <view class="origin">
                    <view class="title">{{ $t('information.card.origintotal') }}</view>
                    <view class="num">{{ userInfo.originalMoney }}</view>
                </view>
            </view>
            <view class="operate-btn">
                <view class="tixian" @click="goWith(0)">{{ $t('information.card.tixian') }}</view>
                <view class="chongzhi" @click="goWith(1)">{{ $t('information.card.chongzhi') }}</view>
            </view>
        </view>
        <!-- 我的资产 -->
        <view class="my-property">
            <view class="title">
                <view class="icon">
                    <image src="../../static/icon/my-property.png" mode="" />
                </view>
                <view class="text">{{ $t('information.property') }}</view>
                <view class="trangle">
                    <!-- <image src="../../static/icon/tran.png" mode="" /> -->
                </view>
            </view>
            <view class="content">
                <view class="content-item">
                    <view class="item-title">{{ $t('information.property.chigu') }}</view>
                    <view class="item-num">{{ userInfo.buyMoney }}</view>
                </view>
                <view class="content-item">
                    <view class="item-title">{{ $t('information.property.keyong') }}</view>
                    <view class="item-num">{{ userInfo.enbleMoney }}</view>
                </view>
                <view class="content-item">
                    <view class="item-title">{{ $t('information.property.dongjie') }}</view>
                    <view class="item-num">{{ userInfo.freezeMoney }}</view>
                </view>
                <view class="content-item">
                    <view class="item-title">{{ $t('information.property.chichang') }}</view>
                    <view class="item-num">{{ userInfo.profitMoney }}</view>
                </view>
            </view>
        </view>
        <!-- 个人属性 -->
        <view class="personal-list">
            <view v-for="(item, index) in list" :key="index" class="list-item" @click="router(item.path, item.titile)">
                <image class="list-icon" :src="item.icon" mode="" />
                <text class="list-name">{{ $t(`information.list.${item.titile}`) }}</text>
                <image class="right" src="../../static/icon/plist/right.png" mode="" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { requestApi } from '@/api';
import { onShow, onLoad } from "@dcloudio/uni-app";
import { setKey, getKey } from '@/utils/storage';


// 路由跳转
function routerPush() {
    uni.navigateTo({
        url: '/pages/setting/setting',
    })
}
function goWith(params) {
    params == 0 && uni.navigateTo({ url: `/pages/with/with?type=${params}` })
    params == 1 && uni.navigateTo({ url: `/pages/with/with?type=${params}` })
}

const userInfo = ref({})
async function getUserMoney() {
    const { status, data, code } = await requestApi.getUserMoney()
    if (code && code == 401) {
        uni.navigateTo({
            url: '/pages/login/login'
        });
    } else {
        if (status == 0) {
            userInfo.value = data
            setKey('userInfo', data)
        }
    }
}

const flag = ref(false)
function router(path, type) {
    if (type == 'shunyi' || type == 'chongzhi' || type == 'tixian') {

        let index = type == 'shunyi' ? 0 : type == 'chongzhi' ? 1 : 2
        setKey('profitIndex', index)
    }
    uni.navigateTo({ url: path })
}


const list = ref([
    {
        icon: '../../static/icon/plist/person.png',
        titile: 'shiming',
        path: '/pages/my-service/certification/cert'
    },
    {
        icon: '../../static/icon/plist/card.png',
        titile: 'jinrong',
        path: '/pages/my-service/financial/financial'
    },
    {
        icon: '../../static/icon/plist/shunyi.png',
        titile: 'shunyi',
        path: '/pages/my-service/profit-loss/profit-loss'
    },
    {
        icon: '../../static/icon/plist/lock.png',
        titile: 'zhijin',
        path: '/pages/my-service/fund-password/fund-password'
    },
    {
        icon: '../../static/icon/plist/login.png',
        titile: 'denglu',
        path: '/pages/my-service/login-password/login-password'
    },
    {
        icon: '../../static/icon/plist/chongzhi.png',
        titile: 'chongzhi',
        path: '/pages/my-service/profit-loss/profit-loss'
    },
    {
        icon: '../../static/icon/plist/tixian.png',
        titile: 'tixian',
        path: '/pages/my-service/profit-loss/profit-loss'
    },
])

//created
onShow(() => {
    getUserMoney()
})
onLoad(() => {
    // getUserMoney()
})


</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    height: 88rpx;
    // #ifndef H5
    margin-top: 88rpx;
    // #endif
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 40rpx;

    .user {
        display: flex;
        align-items: center;

        .user-info {
            margin-left: 23rpx;
            font-weight: 400;

            .nickname {
                font-size: 36rpx;
                color: #fff;
            }

            .username {
                font-size: 22rpx;
                color: #BABABA;
            }

        }
    }


}

.mt-4 {
    margin: 0rpx 17rpx;
}

.avator-box {
    image {
        width: 64rpx;
        height: 64rpx;
        vertical-align: middle;
    }
}

.user-icon {
    image {
        width: 58rpx;
        height: 58rpx;
        vertical-align: middle;
        margin-right: 20rpx;
    }
}

.main {
    // #ifndef H5
    margin-top: calc(88rpx + 88rpx + 48rpx);
    // #endif
    margin-top: 48rpx;
    padding: 0rpx 40rpx;

    .card {
        width: 100%;
        height: 344rpx;
        position: relative;

        .bg {
            width: 100%;
            height: 344rpx;

            object-fit: cover;
            position: absolute;
            z-index: 0;

        }

        .property-box {
            width: 100%;
            height: 100rpx;
            position: absolute;
            top: 61rpx;
            display: flex;
            color: #fff;

            .total {
                margin-left: 44rpx;
            }

            .origin {
                margin-left: 149rpx;

            }
        }

        .operate-btn {
            width: 100%;
            height: 100rpx;
            position: absolute;
            top: 226rpx;
            display: flex;
            color: #fff;

            view {
                width: 191rpx;
                height: 64rpx;
                text-align: center;
                line-height: 64rpx;
                border: #fff solid 2rpx;
                border-radius: 32rpx;
            }

            .tixian {
                margin-left: 80rpx;
            }

            .chongzhi {
                margin-left: 126rpx;
                background-color: rgba(45, 125, 252, .8);
            }
        }
    }

    .my-property {
        background-color: #292A36;
        padding-top: 27rpx;
        width: 100%;
        height: 342rpx;
        margin-top: 40rpx;
        border-radius: 28rpx;

        .title {
            margin: 0rpx 30rpx 0rpx 67rpx;
            display: flex;
            align-items: center;

            .icon {
                image {
                    width: 58rpx;
                    height: 58rpx;
                    vertical-align: middle;
                }
            }

            .text {
                color: #fff;
                margin-left: 12rpx;
            }

            .trangle {
                margin-left: auto;

                image {
                    width: 27rpx;
                    height: 19rpx;
                    vertical-align: middle;
                }
            }
        }

        .content {
            margin-top: 38rpx;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));

            grid-column-gap: 180rpx;
            column-gap: 180rpx;
            grid-row-gap: 50rpx;
            row-gap: 50rpx;

            .content-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .item-title {
                    color: #c7c7c7;
                    font-size: 22rpx;
                }

                .item-num {
                    color: #fff;
                    font-size: 28rpx;
                }
            }
        }

    }

    .personal-list {
        margin-top: 40rpx;
        background-color: #292A36;
        padding-top: 36rpx;
        padding-right: 34rpx;
        padding-bottom: 70rpx;
        border-radius: 28rpx;

        .list-item {
            display: flex;
            align-items: center;
            height: 40rpx;
            margin-bottom: 48rpx;

            .list-icon {
                vertical-align: middle;
                width: 30rpx;
                height: 30rpx;
                margin-left: 36rpx;
            }

            .list-name {
                color: #fff;
                margin-left: 15rpx;
            }

            .right {
                margin-left: auto;
                vertical-align: middle;
                width: 13rpx;
                height: 24rpx;
            }
        }
    }

}

.logout {
    background-color: #2D7DFC;
    width: 500rpx;
    height: 96rpx;
    margin: 69rpx auto 73rpx;
    line-height: 96rpx;
    text-align: center;
    border-radius: 204rpx;
    color: #fff;
    letter-spacing: 2rpx;
}
</style>